<template>
	<view class="invite-container">
		<!-- 数据统计卡片 -->
		<view class="stat-card">
			<view class="stat-item">
				<text class="stat-num">{{inviteData.inviteNum}}</text>
				<text class="stat-label">已邀请</text>
			</view>
			<view class="stat-item">
				<text class="stat-num">{{inviteData.realNum}}</text>
				<text class="stat-label">已实名</text>
			</view>
			<view class="stat-item">
				<text class="stat-num">{{inviteData.phoneNum}}</text>
				<text class="stat-label">已绑定手机</text>
			</view>
		</view>

		<!-- 标题 -->
		<view class="section-title">
			<text>有效邀请记录</text>
			<text v-if="inviteData.dataList.length > 0" class="title-count">共{{inviteData.dataList.length}}人</text>
		</view>

		<!-- 邀请列表 -->
		<view class="invite-list" v-if="inviteData.dataList.length > 0">
			<view class="invite-item" v-for="(item, index) in inviteData.dataList" :key="index">
				<view class="user-avatar">
					<text>{{getAvatarText(item.realName)}}</text>
				</view>
				<view class="user-info">
					<view class="info-row">
						<text class="user-name">{{formatName(item.realName)}}</text>
						<text class="invite-time">{{item.createTime}}</text>
					</view>
					<text class="user-phone">{{item.phone || '未绑定手机'}}</text>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<text class="empty-text">暂无有效邀请记录</text>
		</view>

		<!-- 邀请按钮 -->
		<view>
			<button class="invite-button" @click="shareToFriend" open-type="share">邀请好友</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inviteData: {
					realNum: 0,
					dataList: [],
					phoneNum: 0,
					inviteNum: 0
				},
				inviteCode: ""
			}
		},
		onLoad(options) {
			this.inviteCode = options.inviteCode
			console.log("---------" + this.inviteCode)
			this.getInviteList();
		},
		// 定义页面分享行为
		onShareAppMessage(res) {
			// res.from 来源，button：页面内分享按钮；menu：右上角分享菜单
			if (res.from === 'button') {
				console.log('来自页面内分享按钮');
			} else {
				console.log('来自右上角分享菜单');
			}

			return {
				title: '好友邀请您一起找工作',
				path: '/pages/index/index?inviterCode=' + this.inviteCode, // 指定分享后打开的页面路径，必须是以 / 开头的完整路径
				imageUrl: 'https://file.dingdongjipai.com/sansao/file/cert/invite.png', // 自定义分享图片，可以是本地文件路径或者线上图片路径
				success(res) {
					// 分享成功的回调函数
					uni.showToast({
						title: '分享成功'
					});
				},
				fail(err) {
					// 分享失败的回调函数
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					});
				}
			};
		},
		methods: {
			// 格式化姓名显示
			formatName(name) {
				if (!name || name === "") {
					return "未实名认证";
				}
				return name;
			},

			// 获取头像文本
			getAvatarText(name) {
				if (!name || name === "") {
					return "未";
				}
				// 取最后一个字符
				return name.charAt(name.length - 1);
			},

			// 格式化时间
			formatTime(timeStr) {
				if (!timeStr) return "";
				const date = new Date(timeStr);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				return `${year}-${month}-${day}`;
			},

			// 邀请好友
			shareToFriend() {
				// 调用系统分享菜单
				// 注意：这个方法只会触发onShareAppMessage，不会自动分享
				// 用户仍需在弹出的分享菜单中选择分享到哪里
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage']
				});
			},
			getInviteList() {
				this.$Request.postFormHost(this.$Api.getInviteList).then(res => {
					if (res.status === 0)
						this.inviteData = res.data;
				})
			}
		}
	}
</script>

<style lang="scss">
	.invite-container {
		padding: 30rpx;
	}

	.stat-card {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-around;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stat-num {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.stat-label {
		font-size: 24rpx;
		color: #666;
	}

	.section-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.title-count {
		font-size: 24rpx;
		color: #999;
		font-weight: normal;
	}

	.invite-list {
		background-color: #ffffff;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.invite-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.invite-item:last-child {
		border-bottom: none;
	}

	.user-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #e24b71;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
	}

	.user-avatar text {
		color: #ffffff;
		font-size: 32rpx;
	}

	.user-info {
		flex: 1;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.user-name {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.invite-time {
		font-size: 24rpx;
		color: #999;
	}

	.user-phone {
		font-size: 24rpx;
		color: #666;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		background-color: #ffffff;
		border-radius: 12rpx;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}

	.invite-button {
		position: fixed;
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 90%;
		height: 90rpx;
		background-color: #ff0000b0;
		color: #ffffff;
		border-radius: 45rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: 500;
		box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.3);
	}
</style>